<template>
    <div class="workbench-wrap">
        <v-toolbar color="transparent" flat dark>
            <v-toolbar-title>云印小栈</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-toolbar-items>
                <v-btn icon @click="validate">
                    <v-icon>mdi-settings</v-icon>
                </v-btn>
            </v-toolbar-items>
        </v-toolbar>
        <v-container fluid class="content">
            <v-row no-gutters align="start" justify="center">
                <v-col
                        v-for="(col, index) in cols"
                        :key="index"
                        class="ma-2"
                >
                    <v-card class="pa-3 text-center radius box-shadow justify-start d-flex flex-column" height="250" :to="col.route">
                        <v-img
                                class="mx-auto mt-5 col-auto"
                                height="50"
                                width="50"
                                :src="col.img"
                        ></v-img>
                        <v-card-text>
                            <div class="accent--text body-1 font-weight-bold">{{col.title}}</div>
                            <div class="secondary--text body-1 mt-1">{{col.dec}}</div>
                        </v-card-text>
                    </v-card>
                </v-col>
            </v-row>
            <v-img
                    class="float-img"
                    :src="require('@/assets/float.png')"
            ></v-img>
        </v-container>
        <div class="av-wrap">
            <div class="mr-3 text-center">
                <p class="body-2">软件协会公众号</p>
                <v-img
                        class="mx-auto col-auto"
                        height="120"
                        width="120"
                        :src="require('@/assets/rxcode.jpg')"
                ></v-img>
            </div>
            <div class="text-center">
                <p class="body-2">官方小程序</p>
                <v-img
                        class="mx-auto col-auto"
                        height="120"
                        width="120"
                        :src="require('@/assets/xiaochengxu.jpg')"
                ></v-img>
            </div>
        </div>
    </div>

</template>

<script>
    import {ipcRenderer} from 'electron'
    export default {
        name: "index",
        data() {
            return {
                cols: [
                    { route: '/output/enter-code', title: '开始打印', dec: '输入提取码 即传即拿 轻松一键打印', img: require('@/assets/字体样式.png') },
                    { route: '/output/scan', title: '扫码打印', dec: '使用小程序扫码取件 更快捷更方便的取件方式', img: require('@/assets/打印.png') },
                    { route: '/q&a', title: '帮助引导', dec: '相关问题阐述 快速了解产品的特色以及产品的使用方式', img: require('@/assets/文件记录.png') },
                    { route: '', title: '敬请期待', dec: '程序猿正在努力开发中 更多精彩内容 敬请期待', img: require('@/assets/通知.png') },
                ]
            }
        },
        methods: {
            validate() {
                ipcRenderer.send('openLoginWindow', 'toSetting')
            }
        }
    }
</script>

<style scoped lang="scss">
.workbench-wrap {
    height: 100%;
    width: 100%;
    .content {
        margin-top: 5%;
        .float-img {
            width: 40%;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    }
    .av-wrap {
        position: absolute;
        bottom: 12px;
        left: 28px;
        display: flex;
    }
}
</style>

